<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理定位示例</title>
</head>
<body>
    <h1>地理定位示例</h1>
    <button onclick="getLocation()">获取位置信息</button>
    <p id="latitude"></p>
    <p id="longitude"></p>
    <p id="accuracy"></p>

    <script>
        // BOM : window navigator history
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                alert("浏览器不支持地理定位功能");
            }
        }

            function showPosition(position) {
                const latitude = position.coords.latitude;
                const longitude = position.coords.longitude;
                var accuracy = position.coords.accuracy;

                // 在页面上显示位置信息
                document.getElementById("latitude").innerHTML = "纬度: " + latitude;
                document.getElementById("longitude").innerHTML = "经度: " + longitude;
                document.getElementById("accuracy").innerHTML = "精度: " + accuracy + " 米";
            }

        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("用户拒绝了地理定位请求");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("无法获取当前位置信息");
                    break;
                case error.TIMEOUT:
                    alert("获取位置信息超时");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("发生了未知错误");
                    break;
            }
        }

    </script>
</body>
</html>